<template>
	<view>

		<view v-if="loading > 0">
			<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
				<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
				<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">审核详情</view>
			</view>
			<view class="bg_box">
				<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
				<view class="bg_content">


					<!-- 贷款状态:0: '待审核', 1: '审核通过',2: '审核驳回',3: '贷款通过' -->
					<view class="loan_box">
						<view class="loan" v-if="order.loans_status == 0">
							<view class="title">等待审核中...</view>
						</view>
						<view class="loan" v-else-if="order.loans_status == 1">
							<view class="title">等待放款中...</view>
							<view class="money_box">
								<view class="money">放款金额 {{order.money}}元</view>
								<view class="time">期限{{order.loans_num}}个月</view>
							</view>
						</view>
						<view class="loan" v-if="order.loans_status == 2">
							<view class="title">已驳回</view>

						</view>
						<view class="loan" v-else-if="order.loans_status == 3">
							<view class="title">已放款</view>
							<view class="money_box">
								<view class="money">放款金额 {{order.money}}元</view>
								<view class="time">期限{{order.loans_num}}个月</view>
							</view>
						</view>

						<view class="bank_box" v-if="order.loans_status == 3">
							<view class="text">收款账号</view>
							<view class="bank">
								<view class="i">
									<image :src="'/static/bank0'+order.img_code+'.png'" mode="widthFix"></image>
								</view>
								<view class="t">{{order.bankname}}（{{order.bank_code|end_code}}）</view>
							</view>
						</view>

					</view>

					<view class="details_box">
						<view class="details_title">审核进度</view>

						<!-- 贷款状态:0: '待审核', 1: '审核通过',2: '审核驳回',3: '贷款通过' -->
						<block v-if="order.loans_status == 0">
							<view class="schedule_box">
								<view class="schedule_list">
									<view class="line_box">
										<view class="round"></view>
										<view class="line"></view>
									</view>
									<view class="text_box">
										<view class="title">您的申请单待审核中</view>
										<view class="value">
											正在审核中,请留意工作人员电话通知
										</view>
										<view class="time">{{order.create_time}}</view>
									</view>
								</view>
							</view>
						</block>

						<block v-if="order.loans_status == 1">
							<view class="schedule_box">
								<view class="schedule_list">
									<view class="line_box">
										<view class="round"></view>
										<view class="line"></view>
									</view>
									<view class="text_box">
										<view class="title">您的申请单已通过</view>
										<view class="value">
											请与工作人员联系,商议达成一致后可填写签约单。等银行放款
										</view>
										<view class="time">{{$u.timeFormat(order.check_time, 'yyyy-mm-dd hh:MM:ss')}}
										</view>
									</view>
								</view>
								<view class="schedule_list">
									<view class="line_box">
										<view class="round"></view>
										<view class="line"></view>
									</view>
									<view class="text_box">
										<view class="title">您的申请单待审核中</view>
										<view class="value">
											正在审核中,请留意工作人员电话通知
										</view>
										<view class="time">{{order.create_time}}</view>
									</view>
								</view>
							</view>
						</block>


						<block v-if="order.loans_status == 2">
							<view class="schedule_box">
								<view class="schedule_list">
									<view class="line_box">
										<view class="round"></view>
										<view class="line"></view>
									</view>
									<view class="text_box">
										<view class="title">您的申请单审核未通过</view>
										<view class="rule">驳回原因：{{order.reason||'经审核信息资料不一致'}}</view>
										<view class="time">{{$u.timeFormat(order.check_time, 'yyyy-mm-dd hh:MM:ss')}}
										</view>
									</view>
								</view>
								<view class="schedule_list">
									<view class="line_box">
										<view class="round"></view>
										<view class="line"></view>
									</view>
									<view class="text_box">
										<view class="title">您的申请单待审核中</view>
										<view class="value">
											正在审核中,请留意工作人员电话通知
										</view>
										<view class="time">{{order.create_time}}</view>
									</view>
								</view>
							</view>
						</block>


						<block v-if="order.loans_status == 3">
							<view class="schedule_box">
								<view class="schedule_list">
									<view class="line_box">
										<view class="round"></view>
										<view class="line"></view>
									</view>
									<view class="text_box">
										<view class="value">您的申请单已完成签约</view>
										<view class="time">{{$u.timeFormat(order.send_time, 'yyyy-mm-dd hh:MM:ss')}}
										</view>
									</view>
								</view>
								<view class="schedule_list">
									<view class="line_box">
										<view class="round"></view>
										<view class="line"></view>
									</view>
									<view class="text_box">
										<view class="title">您的申请单已通过</view>
										<view class="value">
											请与工作人员联系,商议达成一致后可填写签约单。等银行放款
										</view>
										<view class="time">{{$u.timeFormat(order.check_time, 'yyyy-mm-dd hh:MM:ss')}}
										</view>
									</view>
								</view>
								<view class="schedule_list">
									<view class="line_box">
										<view class="round"></view>
										<view class="line"></view>
									</view>
									<view class="text_box">
										<view class="title">您的申请单待审核中</view>
										<view class="value">
											正在审核中,请留意工作人员电话通知
										</view>
										<view class="time">{{order.create_time}}</view>
									</view>
								</view>
							</view>
						</block>



					</view>


					<!-- 失败审核 -->
					<!-- <view class="schedule_box">
						<block>
							<view class="schedule_list">
								<view class="line_box">
									<view class="close iconfont icon-guanbi1"></view>
									<view class="line"></view>
								</view>
								<view class="text_box">
									<view class="value">您的申请单审核未通过</view>
									<view class="rule" v-if="index == 0">驳回原因：经审核资料信息不一致</view>
									<view class="time">2024-04-19 10:24:00</view>
								</view>
							</view>
						</block>
					</view> -->

					<!-- 成功审核 -->
					<!-- 	<view class="schedule_box">
						<block>
							<view class="schedule_list">
								<view class="line_box">
									<view class="round"></view>
									<view class="line"></view>
								</view>
								<view class="text_box">
									<view class="value">您的申请单已完成签约</view>
									<view class="time">2024-04-19 10:24:00</view>
								</view>
							</view>
						</block>
					</view> -->



					<view class="details_box">
						<view class="details_title">车辆信息</view>
						<view class="order_list">
							<view class="order_text">
								<view class="text_box">
									<view class="title_box">
										<view class="title">{{order.car_no}}</view>
										<view class="type">已审核</view>
									</view>
									<view class="text">{{order.car_title}}</view>
								</view>
								<view class="order_img">
									<image src="/static/bg04.png" mode="widthFix"></image>
								</view>
							</view>
							<view class="standing">
								<view class="stand">车架号：{{order.vin}}</view>
								<view class="stand">租赁类型：经营性租赁</view>
								<view class="stand">新车指导价：&yen;{{order.member_price}}</view>
								<view class="stand">车辆总额：&yen;{{order.member_price}}</view>
								<!-- 	<view class="stand">首付款：5万</view>
								<view class="stand">每期租金：3000.55元</view>
								<view class="stand">租赁期数：24期</view>
								<view class="stand">尾款：5.3万</view>
								<view class="stand">保证金：1000元</view>
								<view class="stand">押金：1000元</view> -->
							</view>
						</view>
					</view>

					<view class="details_box">
						<view class="details_title">订单信息 </view>
						<view class="list">
							<view class="name">订单编号</view>
							<input disabled="true" type="text" :value="order.order_no" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						<view class="list">
							<view class="name">真实姓名</view>
							<input disabled="true" type="text" :value="order.username" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						<view class="list">
							<view class="name">手机号码</view>
							<input disabled="true" type="text" :value="order.phone" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						<view class="list">
							<view class="name">证件类型</view>
							<input disabled="true" type="text" value="身份证" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						<view class="list">
							<view class="name">证件号码</view>
							<input disabled="true" type="text" :value="order.idcode" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						<view class="list">
							<view class="name">婚姻状况</view>
							<input v-if="order.is_marry" disabled="true" type="text" value="已婚" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
							<input v-else disabled="true" type="text" value="未婚" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>

						<view class="list" v-if="order.acc">
							<view class="name">户籍信息</view>
							<input disabled="true" type="text" :value="order.acc" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						<view class="list">
							<view class="name">职务/职称</view>
							<input disabled="true" type="text" :value="order.job" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						<view class="list" v-if="order.now_addr">
							<view class="name">现在居住地址</view>
							<input disabled="true" type="text" :value="order.now_addr" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>
						<view class="list" v-if="order.use_for">
							<view class="name">车辆租赁用途</view>
							<input disabled="true" type="text" :value="order.use_for" placeholder="请输入"
								placeholder-style="color:#B5B5B5" />
						</view>

					</view>

					<view class="details_box" v-if="order.link_list.length > 0">
						<view class="details_title">其他联系人</view>

						<block v-for="(item,idx) in order.link_list" :key="idx">
							<view class="list">
								<view class="name">联系人姓名</view>
								<input disabled="true" type="text" :value="item.name" placeholder="请输入"
									placeholder-style="color:#B5B5B5" />
							</view>
							<view class="list">
								<view class="name">联系电话</view>
								<input disabled="true" type="text" :value="item.phone" placeholder="请输入"
									placeholder-style="color:#B5B5B5" />
							</view>
						</block>

					</view>

				</view>

				<view class="clear_box"></view>
			</view>


		</view>


		<view class="" v-if="loading == 0">
			<block>
				<u-loading-page iconSize="60" loadingText="正在加载中..." image="/static/logo02.png"
					:loading="true"></u-loading-page>
			</block>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				page: 1,
				loading: 0,
				scrrol: false,
				order: {},

			}
		},
		filters: {
			end_code(car_code) {
				let code = uni.$u.trim(car_code, 'all');
				if (code.length >= 4) {
					code = code.slice(-4);
				}
				return code;
			}
		},
		onLoad(opt) {
			this.id = opt.id || 0;
			if (this.id > 0) {
				this.initData();
			}
		},
		methods: {
			initData() {
				let url = this.site_url + 'api/auth/order/loans_order_detail?id=' + this.id;
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.loading = 1;
						this.order = res.data;
					}

				})

			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		},

	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		background-color: transparent !important;
		color: #333 !important;
	}

	.scrrolHeader {
		background-color: #F9E9E3 !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}

	.details_box {
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 5vw 4%;
		border-radius: 3vw;
	}

	.details_box .details_title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.schedule_box {
		width: 100%;
	}

	.schedule_list {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
	}

	.schedule_list .line_box {
		height: 100%;
		width: 5vw;
		position: absolute;
		left: 0;
		top: 0;
	}

	.schedule_list .line_box .round {
		width: 2.5vw;
		height: 2.5vw;
		margin: 0 auto;
		border-radius: 50%;
		background-color: #E9E9E9;
		margin-top: 1vw;
	}

	.schedule_list .line_box .close {
		width: 2.5vw;
		height: 2.5vw;
		margin: 0 auto;
		background-color: #E9E9E9;
		margin-top: 1vw;
		color: transparent;
		border-radius: 50%;
	}

	.schedule_list .line_box .line {
		width: 2px;
		margin: 0 auto;
		height: calc(100% - 1.25vw);
		background-color: #E9E9E9;
	}

	.schedule_box .schedule_list:nth-child(1) .line_box .round {
		border: 1.4vw solid #FC5D20;
		width: 5vw;
		height: 5vw;
	}

	.schedule_box .schedule_list:nth-child(1) .line_box .close {
		width: 5vw;
		height: 5vw;
		margin: 0 auto;
		border: 50%;
		background-color: #FF4246;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 2.5vw;
	}

	.schedule_box .schedule_list:last-child .line_box .line {
		display: none;
	}

	.schedule_list .text_box {
		flex: 1;
		min-height: 20vw;
		padding-left: 8vw;
	}

	.schedule_list .text_box .title {
		font-size: 3.6vw;
		color: #C0C0C0;
		margin-bottom: 1vw;
	}

	.schedule_list .text_box .value {
		font-size: 3.4vw;
		color: #C0C0C0;
		line-height: 6vw;
	}


	.schedule_list .text_box .rule {
		font-size: 3.3vw;
		color: #FF4246;
		margin-top: 1vw;
	}

	.schedule_list .text_box .time {
		font-size: 3.2vw;
		color: #CACACA;
		margin-top: 1vw;
	}

	.schedule_box .schedule_list:nth-child(1) .text_box .title {
		color: #333;
	}

	.schedule_box .schedule_list:nth-child(1) .text_box .value {
		color: #333;
	}

	.schedule_box .schedule_list:nth-child(1) .text_box .time {
		color: #999;
	}

	.schedule_box .schedule_list:last-child .text_box {
		min-height: auto;
	}

	.order_list {
		width: 100%;
		margin: 4% auto 0;
		background-color: #fff;
		border-radius: 3vw;
		box-sizing: border-box;
	}

	.order_list .order_text {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.order_list .order_text .order_menu {
		font-size: 3.5vw;
		color: #fff;
		background-color: #FC5D20;
		height: 9vw;
		border-radius: 9vw;
		width: 20vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	.order_list .order_text .order_menu02 {
		background-color: #FF4246;
	}

	.order_list .order_text .text_box {
		flex: 1;
	}

	.order_list .order_text .text_box .title_box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.order_list .order_text .text_box .title_box .title {
		font-size: 5vw;
		font-weight: bold;
		color: #333;
		margin-right: 3vw;
	}

	.order_list .order_text .text_box .title_box .type {
		height: 5vw;
		padding: 0 1.5vw;
		border-radius: 0.8vw;
		font-size: 3vw;
		letter-spacing: 1px;
		font-weight: bold;
		color: #fff;
		background-color: #5F6488;
		transform: skew(-15deg);
		display: flex;
		align-items: center;
	}

	.order_list .order_text .text_box .text {
		width: 100%;
		font-size: 3.5vw;
		color: #666666;
		margin-top: 2vw;
	}

	.order_list .order_text .order_img {
		width: 28vw;
		margin-left: 3vw;
	}

	.order_list .order_text .order_img image {
		width: 100%;
	}

	.order_list .rule_box {
		font-size: 3.3vw;
		font-weight: bold;
		height: 10vw;
		padding: 0 4%;
		display: flex;
		align-items: center;
		margin-top: 4%;
		border-radius: 2vw;
	}

	.ruleGo {
		background-color: #F7FEFB !important;
		color: #1FC092 !important;
	}

	.ruleNo {
		background-color: #FFF9F9 !important;
		color: #FF4246 !important;
	}

	.order_list .standing {
		width: 100%;
		padding: 3vw;
		border-radius: 2vw;
		background-color: #F8F8F8;
		margin-top: 4%;
	}

	.order_list .standing .stand {
		color: #666;
		font-size: 3.5vw;
		margin-top: 1vw;
	}

	.order_list .standing .stand:nth-child(1) {
		margin-top: 0;
	}

	.order_list .tips {
		font-size: 2.8vw;
		color: #FC5D20;
		margin-top: 4%;
	}

	.order_list .menu_box {
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
	}

	.order_list .menu_box .icon {
		font-size: 5vw;
		margin-right: 1vw;
	}

	.order_list .menu_box .icon01 {
		color: #1FC092;
	}

	.order_list .menu_box .icon02 {
		color: #FC5D20;
	}

	.order_list .menu_box .menu_text {
		font-size: 3.5vw;
		color: #666;
		margin-right: 1vw;
	}

	.order_list .menu_box .menu_num {
		flex: 1;
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		margin-right: 1vw;
	}

	.order_list .menu_box .menu_period {
		font-size: 3.5vw;
		color: #666;
	}

	.order_list .menu_box .menu {
		font-size: 3.5vw;
		color: #fff;
		background-color: #1FC092;
		height: 9vw;
		border-radius: 9vw;
		width: 20vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	.details_box .list {
		width: 100%;
		padding: 5vw 0;
		border-bottom: 1px solid #F3F3F3;
		display: flex;
		align-items: center;
	}

	.details_box .list .name {
		font-size: 3.8vw;
		color: #333;
		margin-right: 4vw;
	}

	.details_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
		text-align: right;
	}

	.details_box .list .arrow {
		font-size: 3.5vw;
		color: #B5B5B5;
	}

	.loan_box {
		width: 100%;
		background-color: #fff;
		border-radius: 3vw;
		padding-bottom: 3vw;
	}

	.loan_box .loan {
		background-color: #FC5D20;
		border-radius: 3vw;
	}

	.loan_box .loan .title {
		padding-left: 6vw;
		height: 20vw;
		line-height: 20vw;
		width: 100%;
		font-size: 6vw;
		color: #fff;
		font-weight: bold;
	}

	.loan_box .loan .money_box {
		width: 100%;
		height: 13vw;
		display: flex;
		align-items: center;
		border-radius: 0 0 3vw 3vw;
		background-color: #EF581E;
		padding: 0 6vw;
	}

	.loan_box .loan .money_box .money {
		font-size: 3.8vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}

	.loan_box .loan .money_box .time {
		font-size: 3.8vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}

	.loan_box .loan .money_box .time:nth-child(2) {
		text-align: right;
	}

	.loan_box .bank_box {
		width: calc(100% - 6vw);
		height: 15vw;
		margin: 3vw auto 0;
		padding: 0 4vw;
		background-color: #F9F9F9;
		display: flex;
		align-items: center;
	}

	.loan_box .bank_box .text {
		font-size: 3.6vw;
		color: #333;
		font-weight: bold;
	}

	.loan_box .bank_box .bank {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.loan_box .bank_box .bank .i {
		width: 5vw;
		margin-right: 1vw;
	}

	.loan_box .bank_box .bank .i image {
		width: 100%;
	}

	.loan_box .bank_box .bank .t {
		font-size: 3.6vw;
		color: #333;
		font-weight: bold;
	}
</style>